'use strict';

import React, {StyleSheet,View,Text,TextInput,TouchableNativeFeedback,Dimensions,Alert} from 'react-native';
import FontIcon from 'react-native-vector-icons/FontAwesome';
//颜色
import * as MColor from '../../designColor/meterialColor';
//组件
import ServerSet from './serverSet'
//redux
import {bindActionCreators} from 'redux';
import * as mainScreenActions from '../../actions/mainScreenActions';
import { connect } from 'react-redux';

var WINDOW_WIDTH = Dimensions.get('window').width;
var WINDOW_HEIGHT = Dimensions.get('window').height;

class Login extends React.Component {
	//==============不登录直接用默认的redux数据测试app=================================
	_enterTextmode=()=>{
		this.props.reduxSetTestMode();//测试模式
		this.props.navigator.push({
			name: 'mainScreen'
		})
	};
	//=============进入服务器设置的页面，可以设置服务器的ip 端口等===========================
	_enterServerSet=()=>{
		//alert("2222222");
		this.setState({
			showSetServer:true
		})
	};
	//============进入登录页面会被调用在服务器设置页面================================
	enterloginPage=()=>{
		//alert("2222222");
		this.setState({
			showSetServer:false
		})
	};
	//======================================单击登录按钮=============================
	_login=()=>{
		this.setState({ifStartLogin:true});//可以触发跳转的动作
		this.props.reduxDontSetTestMode();//不用测试模式
		this.props.reduxFetchManinscreenData();
		// this.props.navigator.push({
		// 	name: 'mainScreen'
		// })
	};
	//=============当props改变的时候,如果fetch成功，就路由跳转===============================
	componentWillReceiveProps(nextprops){
		if(this.state.ifStartLogin){//只有当单击_login,开始login的流程时才会触发下面的跳转等动作			
			if(nextprops.mapstate.fetchstate=='success'){
				this.props.navigator.push({
					name: 'mainScreen'
				})
				this.setState({ifStartLogin:false});//可以触发跳转的动作
			};
			if(nextprops.mapstate.fetchstate=='error'){
				Alert.alert("错误","登录失败,请确保服务器设置正确与账号密码填写正确。")
				this.setState({ifStartLogin:false});//可以触发跳转的动作
			}
			//this.setState({ifStartLogin:false});//可以触发跳转的动作
		}
	}
	//=================构造函数=================================
	constructor(pros){
		super(pros);
		this.state={
			showSetServer:false,//一开始不显示服务器的设置
			ifStartLogin:false,//指示是否开始login，只有这个值为真的时候，才会当props接收到fetchstate=='success'，进行跳转
		}
	}
	//=======================渲染===================================
  	render() {
  		var loginpage,loginingtiptext;
  		//显示正在拉取的状态,只有当按下登录按钮后才会显示
		if(this.props.mapstate.fetchstate=='fetching' && this.state.ifStartLogin){
			loginpage=<View style={styles.maskpage}></View>
			loginingtiptext=<View style={styles.loginingtip}><Text style={styles.loginingtiptext}>登录中...</Text></View>
		};
  		//如果显示服务器地址设置等
  		if (this.state.showSetServer) {
  			return(
  				<ServerSet enterloginPage={this.enterloginPage}></ServerSet>
  			);
  		}else{
  			return (
  				<View style={styles.main}>
	  				<View style={styles.contain}>
			      		<View style={styles.headeruser}>
			      			<Text style={styles.headertitle}>BW800母猪饲喂器</Text>
				      		<View style={styles.headeruserCircle}>
				      			<FontIcon name="github-alt" size={60} color="white" />
				      		</View>
				      	</View>
				      	<View style={styles.textinputview}>
				      		<View style={styles.usernameinput}>
				      			<FontIcon style={styles.usernameinputIcon} name="user" size={30} color={MColor.DARK_PRIMARY_COLOR} />
				      			<TextInput 
				      				style={styles.usernameinputText}
				      				underlineColorAndroid={MColor.PRIMARY_COLOR}
				      				placeholder="用户名/邮箱" 
				      			></TextInput>
				      		</View>
				      		<View style={styles.usernameinput}>
				      			<FontIcon style={styles.usernameinputIcon} name="key" size={30} color={MColor.DARK_PRIMARY_COLOR} />
				      			<TextInput
				      				placeholder="密码"
				      				underlineColorAndroid={MColor.PRIMARY_COLOR}
				      				style={styles.usernameinputText}></TextInput>
				      		</View>
				      	</View>
				      	<View style={styles.btnandfooter}>
				      		<TouchableNativeFeedback onPress={this._login}>
					      		<View style={styles.btnlogin}>
					      			<Text style={styles.btnloginText}>登   录</Text>
					      		</View>
				      		</TouchableNativeFeedback>
				      		<Text onPress={this._enterTextmode} style={styles.testmode}>测试模式</Text>
				      		<Text onPress={this._enterServerSet} style={styles.testmode}>服务器设置</Text>
				        </View>
				    </View>
  					{/*登录中。。。的显示view*/}
  					{loginpage}
  					{loginingtiptext}
  				</View>

	    	);
  		};
	   
    }
}

const styles = StyleSheet.create({
	main:{
		flex:1
	},
	contain:{
		flex:1,
		//backgroundColor:MColor.LIGHT_PRIMARY_COLOR,
		justifyContent:'center',
		alignSelf:'center',
	},
	maskpage:{
		position:'absolute',
		justifyContent:'center',
		alignItems:'center',
		top:0,
		left:0,
		width:WINDOW_WIDTH,
		height:WINDOW_HEIGHT,
		backgroundColor:'black',
		opacity:0.5
	},
	loginingtip:{
		position:'absolute',
		width:150,
		height:50,
		top:200,
		opacity:0.8,
		left:WINDOW_WIDTH/2-75,
		borderRadius:10,
		backgroundColor:'black',
		justifyContent:'center',
		alignItems:'center'
	},
	loginingtiptext:{
		fontSize:20,
		color:'white'
	},
	headeruser:{
		flex:1,
		justifyContent:'center',
		alignItems:'center',
	},
	headertitle:{
		fontSize:25,
		marginVertical:30,
		color:MColor.SECONDARY_TEXT
	},
	headeruserCircle:{
		width:80,
		height:80,
		borderRadius:40,
		backgroundColor:MColor.DARK_PRIMARY_COLOR,
		justifyContent:'center',
		alignItems:'center'
	},
	textinputview:{
		flex:1,
		//flexDirection:'row',
		width:300,
		//backgroundColor:'green'

	},
	usernameinput:{
		marginVertical:12,
		//flex:1,
		height:40,
		alignItems:'center',
		//backgroundColor:'red',
		flexDirection:'row'
	},
	usernameinputIcon:{
		flex:1,
		marginRight:10,
	},
	usernameinputText:{
		flex:10,
		//color:MColor.LIGHT_PRIMARY_COLOR
	},
	btnandfooter:{
		flex:1,
		//backgroundColor:'red'
	},
	btnlogin:{
		height:60,
		backgroundColor:MColor.PRIMARY_COLOR,
		justifyContent:'center',
		alignItems:'center'
	},
	btnloginText:{
		fontSize:30,
		color:'white'
	},
	testmode:{
		fontSize:15,
		marginVertical:20,
		color:MColor.DARK_PRIMARY_COLOR
	}
});

//将全局state绑定到组件的props中
function mapStateToProps(state) {
  return { 
    //state字段key
    mapstate: state.mainScreenRedux.system,//在上面的组件实例化时存入 
  }
}

//绑定一个方法到props中
function mapDispatchToProps(dispatch) {
	var mapactions=bindActionCreators(mainScreenActions, dispatch);
	return { 
	    reduxFetchManinscreenData: mapactions.reduxFetchManinscreenData,
	    reduxDontSetTestMode:mapactions.reduxDontSetTestMode,
	    reduxSetTestMode:mapactions.reduxSetTestMode
	}
}

//将全局的state绑定到组件中
export default connect(mapStateToProps,mapDispatchToProps)(Login);